<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link href="Public/favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" type="text/css" href="__ADMIN__/css/base.css" media="all">
    <link rel="stylesheet" type="text/css" href="__ADMIN__/css/common.css" media="all">
    <link rel="stylesheet" type="text/css" href="__ADMIN__/css/module.css">
    <link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css" media="all">
	<link rel="stylesheet" type="text/css" href="__ADMIN__/css/default_color.css" media="all">
     <!--[if lt IE 9]>
    <script type="text/javascript" src="Public/static/jquery-1.10.2.min.js"></script>
    <![endif]--><!--[if gte IE 9]><!-->
    <script type="text/javascript" src="__ADMIN__/js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="__ADMIN__/js/jquery.mousewheel.js"></script>
    <!--<![endif]-->
    
    <style type="text/css"> 
	/*密码强度*/
	.pw-strength {clear: both;position: relative;top: 8px;width: 180px;}
	.pw-bar{background: url(__ADMIN__/images/pwd-1.png) no-repeat;height: 14px;overflow: hidden;width: 179px;}
	.pw-bar-on{background:  url(__ADMIN__/images/pwd-2.png) no-repeat; width:0px; height:14px;position: absolute;top: 1px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
	.pw-weak .pw-defule{ width:0px;}
	.pw-weak .pw-bar-on {width: 60px;}
	.pw-medium .pw-bar-on {width: 120px;}
	.pw-strong .pw-bar-on {width: 179px;}
	.pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
	.pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}
	</style>
    
</head>
<body>
    <!-- 头部 -->
    <include file="./Public/Admin/tpl/header.html" />
    <!-- /头部 -->

    <!-- 边栏 -->
    <include file="./Public/Admin/tpl/left.html" />
    <!-- /边栏 -->

    <!-- 内容区 -->
    <div id="main-content">
        <div id="top-alert" class="fixed alert alert-error" style="display: none;">
            <button class="close fixed" style="margin-top: 4px;">&times;</button>
            <div class="alert-content">这是内容</div>
        </div>
        
        <div id="main" class="main">
			<!-- 标题栏 -->
			<div class="tab-wrap">
				<ul class="tab-nav nav">
					<li ><a href="{$CURRENT_CONTROLLER}/modifySelfInfo">修改信息</a></li>
					<li class="current"><a href="{$CURRENT_CONTROLLER}/modifyPwd">修改密码</a></li>
				</ul>
				<div class="tab-content">
					<!-- 修改密码表单 -->
                    <form action="" method="post" class="form-horizontal" autocomplete="off">
						<div class="form-item">
							<label class="item-label">旧密码：</label>
							<div class="controls">
								<input type="password" name="old" class="text input-large" autocomplete="off" />
							</div>
						</div>
						<div class="form-item">
							<label class="item-label">新密码：</label>
							<div class="controls">
								<input id="pass" type="password" name="password" class="text input-large" autocomplete="off" />
								<div id="level" class="pw-strength">     	
									<div class="pw-bar"></div>
									<div class="pw-bar-on"></div>
									<div class="pw-txt">
									<span>弱</span>
									<span>中</span>
									<span>强</span>
									</div>
								</div>
							</div>
						</div>
						<div class="form-item">
							<label class="item-label">确认密码：</label>
							<div class="controls">
								<input type="password" name="repassword" class="text input-large" autocomplete="off" />
							</div>
						</div>
						<div class="form-item">
							<button type="submit" class="btn submit-btn ajax-post" target-form="form-horizontal">确 认</button>
							<button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
						</div>
					</form>
				</div>
			</div>
        </div>
    </div>
    <!-- /内容区 -->
    
    <script type="text/javascript"> 
		$(function(){ 
			$('#pass').keyup(function () { 
				var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
				var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
				var enoughRegex = new RegExp("(?=.{6,}).*", "g"); 
		
				if (false == enoughRegex.test($(this).val())) {
					$('#level').removeClass('pw-weak'); 
					$('#level').removeClass('pw-medium'); 
					$('#level').removeClass('pw-strong'); 
					$('#level').addClass(' pw-defule'); 
					 //密码小于六位的时候，密码强度图片都为灰色 
				} 
				else if (strongRegex.test($(this).val())) { 
					$('#level').removeClass('pw-weak'); 
					$('#level').removeClass('pw-medium'); 
					$('#level').removeClass('pw-strong'); 
					$('#level').addClass(' pw-strong'); 
					 //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强 
				} 
				else if (mediumRegex.test($(this).val())) { 
					$('#level').removeClass('pw-weak'); 
					$('#level').removeClass('pw-medium'); 
					$('#level').removeClass('pw-strong'); 
					$('#level').addClass(' pw-medium'); 
					 //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
				} 
				else { 
					$('#level').removeClass('pw-weak'); 
					$('#level').removeClass('pw-medium'); 
					$('#level').removeClass('pw-strong'); 
					$('#level').addClass('pw-weak'); 
					 //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的 
				} 
				return true; 
			}); 
		}) 
	</script>
    
    
    <!-- 底部 -->
	<include file="./Public/Admin/tpl/footer.html" />
    <!-- /底部 -->
